<%--
 Created by IntelliJ IDEA.
 User: YYY-Work
 Date: 2017/7/21
 Time: 12:16
 To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE>
<html>
<head>
    <title>音频专题音频列表</title>
    <meta charset="UTF-8">
    <title>AdminLTE | Data Tables</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    <!-- start分页需要使用以下三个js -->
    <script type="text/javascript" src="<%=basePath%>/js/jquery-2.1.1.min.js"></script>
    <!-- end分页需要使用以上三个js -->

    <style type="text/css">
        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }
    </style>
</head>
<body class="skin-blue">
<!-- getHeader -->
<s:action name="getHeader" namespace="/privilege" executeResult="true"/>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->

    <!-- getMenus -->
    <s:action name="getMenus" namespace="/privilege" executeResult="true"/>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <small>专题音频列表-${voiceOnDemond.dataName}</small>
                <button type="btn" class="btn btn-primary btn-xs" style="float: right;margin-right: 30px"
                        data-toggle="modal" onclick="showAdd()">新增
                </button>
            </h1>
            <input id="recid" name="recid" style="display: none" value="${voiceOnDemond.recid}">

        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">

                        <!-- 文章列表 -->
                        <form method="post" target="_self" action="" name="listForm">

                            <div class="form-group">
                                <lable style="float: left;margin-left: 30px;font-weight: bold;font-size: 18px">音频列表
                                </lable>
                            </div>
                            <div class="box-body table-responsive" id="listDiv">

                                <s:property value="res" escape="false"/>
                            </div><!-- /.box-body -->
                        </form>

                    </div><!-- /.box -->

                </div>
            </div>

        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->

<!--新增弹出框-->
<div class="modal fade" id="AddVoiceModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="messageModalLabel">
                    新增音频
                </h4>
            </div>
            <div class="modal-body" id="modal-body">

                <form id="adddataform" enctype="multipart/form-data">
                    <input name="voiceOnDemondId" value="${voiceOnDemond.recid}" style="display: none"/>
                    <div id="add_detail">

                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="btm" class="btn btn-primary" onclick="addVoiceData()">新增</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--修改弹出框-->
<div class="modal fade" id="ModifyVoiceModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    修改音频
                </h4>
            </div>
            <div class="modal-body" id="modify-modal-body">

            </div>
            <div class="modal-footer">
                <button type="btm" class="btn btn-primary" onclick="modifyVoiceData()">修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--删除提示框-->
<div class="modal fade" id="deleteAlertModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    操作提示
                </h4>
                <input id="d_recid" style="display: none"/>
            </div>
            <div class="modal-body">
                <label id="d_dataName"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="deleteVoiceData()">确定
                </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">取消
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
<script type="text/javascript" src="<%=basePath%>/js/admin/utils.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/base/listtable.js"></script>
<link href="<%=basePath%>/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="<%=basePath%>/themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="<%=basePath%>/js/sortable.js" type="text/javascript"></script>
<script src="<%=basePath%>/js/fileinput.js" type="text/javascript"></script>
<script src="<%=basePath%>/js/locales/zh.js" type="text/javascript"></script>
<script src="<%=basePath%>/themes/explorer/theme.js" type="text/javascript"></script>
<script type="text/javascript">

    <!--查询专题下的音频列表-->
    function queryVoiceSubjectDataList() {
        var recid = Utils.trim($("#recid").val());

        listTable.action = "<%=basePath%>/voice/ajaxQueryVoiceDataList.action";
        listTable.filter['voiceOnDemondId'] = recid;
        listTable.filter['isUsedFlag'] = 1;
        listTable.filter['currentPage'] = 1;
        listTable.loadList();
    }

    $(document).ready(new function () {
        queryVoiceSubjectDataList();
    })

    <!--弹出删除二次确认框-->
    function showDeleteAlert(recid, dataName) {

        $("#d_recid").val(recid);
        if (Utils.isEmail(dataName)) {
            $("#d_dataName").html("你要删除该音频信息吗？");
        } else {
            $("#d_dataName").html("你要删除" + dataName + "音频信息吗？");
        }
        $('#deleteAlertModal').modal('show');
    }

    function deleteVoiceData() {
        $('#deleteAlertModal').modal('hide');
        var recid = $("#d_recid").val();
        $.ajax({
            type: "POST",
            url: "<%=basePath%>/voice/ajaxDeleteyVoiceData.action",
            data: "recid=" + recid,
            async: false,
            error: function (request) {
                alert("网络异常");
            },
            success: function (data) {
                $('#deleteAlertModal').modal('hide');
                alert("修改成功");
            }
        });
    }

    <!--新增-->
    function showAdd() {


        var aa = '   <div class="form-group">\n' +
            '        <label>标题</label>\n' +
            '        <input type="text" class="form-control" name="dataName" id="a_dataName" placeholder="标题">\n' +
            '    </div>\n' +
            '    <div class="form-group">\n' +
            '        <label for="a_dataDesc">内容</label>\n' +
            '        <input type="text" class="form-control" id="a_dataDesc" name="dataDesc" placeholder="内容">\n' +
            '    </div>\n' +
            '    <div class="form-group">\n' +
            '        <label for="a_dataDesc">是否可见</label>\n' +
            '        <select class="form-control" name="isIssueFlag">\n' +
            '            <option value="2">不可见</option>\n' +
            '            <option value="1">可见</option>\n' +
            '        </select>\n' +
            '    </div>\n' +
            '    <div class="form-group">\n' +
            '        <label for="a_imgUrl">图片</label>\n' +
            '        <input type="file" class="form-control" name="imgUrlImage" id="a_imgUrl">\n' +
            '    </div>\n' +
            '    <div class="form-group">\n' +
            '        <label for="a_voiceFile">音频</label>\n' +
            '        <input type="file" class="form-control" name="voiceUrlMp3" id="a_voiceFile" >\n' +
            '    </div>';

        $("#add_detail").empty();
        $("#add_detail").append(aa);

        $("#a_imgUrl").fileinput({
            language: 'zh', //设置语言 
            showUpload: false, //是否显示上传按钮  
            showCaption: true,//是否显示标题  
            allowedPreviewTypes: ['image'],
            allowedFileTypes: ['image'],
            allowedFileExtensions: ['jpg', 'png'],
        });

        $("#a_voiceFile").fileinput({
            language: 'zh', //设置语言 
            showUpload: false, //是否显示上传按钮  
            showCaption: true,//是否显示标题  
            allowedPreviewTypes: ['audio'],
            allowedFileTypes: ['audio'],
            allowedFileExtensions: ['mp3'],
        });

        $('#AddVoiceModal').modal('show');
    }

    function addVoiceData() {
        var formData = new FormData($('#adddataform')[0]);//
        $('#AddVoiceModal').modal('hide');
        $.ajax({
            type: "POST",
            url: "<%=basePath%>/voice/ajaxAddVoiceData.action",
            data: formData,
            async: true,
            contentType: false,
            processData: false,
            error: function (request) {
                alert("网络异常");
            },
            success: function (data) {
                data = JSON.parse(data);
                if (data.errorCode >= 0) {
                    listTable.loadList();
                    alert("新增音频成功");
                } else {
                    alert(data.errorMsg);
                }
            }
        });
    }

    <!--修改-->
    function queryVoiceDataForUpdate(recid) {
        $.ajax({
            type: "POST",
            url: "<%=basePath%>/voice/ajaxQueryVoiceDataDetailForUpdate.action",
            data: "recid=" + recid,
            async: false,
            error: function (request) {
                alert("网络异常");
            },
            success: function (data) {
                var data = JSON.parse(data);
                if (data.errorCode >= 0) {

                    $("#modify-modal-body").empty();
                    $("#modify-modal-body").append(data.content);

                    if (!Utils.isEmpty(data.isIssueFlag)&&data.isIssueFlag==1)
                    {
                        $("#m-isIssueFlag").val("1");
                    }else
                    {
                        $("#m-isIssueFlag").val("2");
                    }

                    if (Utils.isEmpty(data.imgUrl)) {
                        $("#m_imgUrl").fileinput({
                            language: 'zh',//设置语言?
                            showUpload: false,//是否显示上传按钮??
                            showCaption: true,//是否显示标题
                            maxFileCount: 1,
                            allowedPreviewTypes: ['image'],
                            allowedFileTypes: ['image'],
                            allowedFileExtensions: ['jpg', 'png'],
                        });

                    } else {
                        var imgUrl = null;
                        if (data.imgUrl.indexOf("http://") > 0)
                        {
                            imgUrl = data.imgUrl;
                        }else
                        {
                            imgUrl="http://res.shouerhealth.cn/"+data.imgUrl;
                        }
                        $("#m_imgUrl").fileinput({
                            language: 'zh',//设置语言
                            showUpload: false,//是否显示上传按钮
                            showCaption: true,//是否显示标题
                            maxFileCount: 1,
                            allowedPreviewTypes: ['image'],
                            allowedFileTypes: ['image'],
                            allowedFileExtensions: ['jpg', 'png'],
                            initialPreview: [
                                '<img src='+imgUrl +' class="file-preview-image" style=" width:200px;height:200px" />',
                            ],
                        });
                    }

                    if (Utils.isEmpty(data.voiceUrl)) {
                        $("#m_voiceFile").fileinput({
                            language: 'zh',//设置语言
                            showUpload: false,//是否显示上传按钮
                            showCaption: true,//是否显示标题
                            maxFileCount: 1,
                            allowedPreviewTypes: ['audio'],
                            allowedFileTypes: ['audio'],
                            allowedFileExtensions: ['mp3'],
                        });
                    } else {
                        var voiceUrl = null;
                        if (data.voiceUrl.indexOf("http://") > 0)
                        {
                            voiceUrl =data.voiceUrl;
                        }else
                        {
                            voiceUrl = "http://res.shouerhealth.cn/" +data.voiceUrl;
                        }
                        $("#m_voiceFile").fileinput({
                            language: 'zh',//设置语言?
                            showUpload: false,//是否显示上传按钮??
                            showCaption: true,//是否显示标题
                            maxFileCount: 1,
                            allowedPreviewTypes: ['audio'],
                            allowedFileTypes: ['audio'],
                            allowedFileExtensions: ['mp3'],
                            initialPreview: [
                                '<div class="file-preview-audio"><audio class="kv-preview-data" controls>\n<source src= ' + voiceUrl +
                                '>\n' + '\n</audio></div>\n',
                            ],
                        });
                    }

                    $('#ModifyVoiceModal').modal('show');
                } else {
                    alert(data.errorMsg);
                }
            }
        });
    }

    function modifyVoiceData() {
        var formData = new FormData($('#modifyform')[0]);//
        $('#ModifyVoiceModal').modal('hide');
        $.ajax({
            type: "POST",
            url: "<%=basePath%>/voice/ajaxUpdateVoiceData.action",
            data: formData,
            async: true,
            contentType: false,
            processData: false,
            error: function (request) {
                alert("网络异常");
            },
            success: function (data) {
                data = JSON.parse(data);
                if (data.errorCode >= 0) {
                    listTable.loadList();
                    alert("修改音频成功");
                } else {
                    alert(data.errorMsg);
                }
            }
        });
    }

</script>
</html>
